<template>
  <div>
    <ul class="city-letter">
      <li v-for="key of lett" :key="key"
       @click="$emit('aplha', key)"
       @touchmove="handmove" :ref="key">
      {{key}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'LetterHome',
  props: {
    list: Object
  },
  computed: {
    lett () {
      let arr = []
      for (let key in this.list) {
        arr.push(key)
      }
      return arr
    }
  },
  methods: {
    handmove (e) {
      let mouseY = e.touches[0].pageY
      let AtoTop = this.$refs['A'][0].offsetTop
      let alphaToHeader = (mouseY - 80) - AtoTop
      let index = Math.floor(alphaToHeader / 24)
      let currs = this.lett[index]
      if (currs) {
        this.$emit('aplha', currs)
      }
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .city-letter
    display: flex
    flex-direction column
    justify-content center
    position fixed
    top 1.6rem
    right 0
    bottom 0
    width 0.4rem
    li
      line-height 0.4rem
      text-align center
      color #00BCD4
</style>
